<!--头部公共部分-->
{include file="common/header" /}
<div style="padding:5px;">
    <div class="layui-tab">
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form">

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>星期</legend>
                    </fieldset>
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <div class="layui-form-item">
                                <input type="checkbox" name="xq" lay-filter="check" value="8"  title="工作日" lay-skin="primary">
                                <input type="checkbox" name="xq" lay-filter="check" value="9"  title="周末" lay-skin="primary">
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-form-item">
                                <input type="checkbox" name="xq" lay-filter="check" class="xq_1" title="星期一" value="1" lay-skin="primary">
                                <input type="checkbox" name="xq" lay-filter="check" class="xq_1" title="星期二" value="2" lay-skin="primary">
                                <input type="checkbox" name="xq" lay-filter="check" class="xq_1" title="星期三" value="3" lay-skin="primary">
                                <input type="checkbox" name="xq" lay-filter="check" class="xq_1" title="星期四" value="4" lay-skin="primary">
                                <input type="checkbox" name="xq" lay-filter="check" class="xq_1" title="星期五" value="5" lay-skin="primary">
                                <input type="checkbox" name="xq" lay-filter="check" class="xq_1" title="星期六" value="6" lay-skin="primary">
                                <input type="checkbox" name="xq" lay-filter="check" class="xq_1" title="星期日" value="7" lay-skin="primary">
                            </div>
                            <input type="hidden"  id="xq">
                        </div>
                    </div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>上课时段-教室</legend>
                    </fieldset>
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">常用时间段</label>
                                    <div class="layui-input-inline">
                                        <select name="time_slot" lay-search="" lay-filter="time_slot">
                                            <option value=""></option>
                                            {volist name="times" id="time"}
                                            <option value="{$time.id}">{$time.week}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-form-item">
                                <div class="layui-inline sk">
                                    <label class="layui-form-label"><span style="color: red;">*</span>开始时间</label>
                                    <div class="layui-input-inline">
                                        <select name="start_time" lay-filter="start_id" id="start_id" lay-verify="required">
                                            <option value="">快速选择</option>
                                            <option value="1">08:00</option>
                                            <option value="2">09:00</option>
                                            <option value="3">10:00</option>
                                            <option value="4">11:00</option>
                                            <option value="5">13:00</option>
                                            <option value="6">14:00</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline si">
                                    <label class="layui-form-label">开始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="start_time" id="start_time" autocomplete="off" readonly placeholder="开始时间" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline ss">
                                    <label class="layui-form-label"><span style="color: red;">*</span>上课时长</label>
                                    <div class="layui-input-inline">
                                        <select name="time_long" id="time_long_id" lay-filter="time_long_id" lay-verify="required">
                                            <option value="">快速选择</option>
                                            <option value="60">60分钟</option>
                                            <option value="90">90分钟</option>
                                            <option value="120">120分钟</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline sc">
                                    <label class="layui-form-label">上课时长</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="time_long" id="time_long" autocomplete="off" readonly placeholder="结束时间" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">结束时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="end_time" id="end_time" autocomplete="off" readonly placeholder="结束时间" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label"><span style="color: red;">*</span>上课教室</label>
                                    <div class="layui-input-inline">
                                        <select name="class_room" lay-search="" lay-verify="required">
                                            <option value=""></option>
                                            {volist name="rooms" id="room"}
                                            <option value="{$room.id}">{$room.class_name}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="layui-form-item">-->
                        <!--<div class="layui-inline" style="margin-left: 70px;">-->
                            <!--<div class="layui-input-inline">-->
                                <!--<a class="layui-btn layui-btn-normal" lay-submit lay-filter="form">确认</a>-->
                                <!--<a class="layui-btn layui-btn-primary" id="cancel">取消</a>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                </form>
            </div>
        </div>
    </div>
</div>
<!--底部公共部分-->
{include file="common/footer" /}

<script>

    layui.use(['element', 'table','jquery','form','layer'], function () {
        let $ = layui.jquery
            ,element = layui.element
            ,layer = layui.layer
            ,table = layui.table
            ,form = layui.form;

        $("#cancel").click(function () {
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        })

        form.on('select(start_id)', function (data) {
            let start_id = data.value;
            let start_time = $('select[name=start_time] option:selected').text();
        });



        form.on('select(time_long_id)', function (data) {
            let start_id = data.value;
            let start_time = $('select[name=start_time] option:selected').text();
            let time_long = $('select[name=time_long] option:selected').val();
            let now = new Date();
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let date = now.getDate();

            if(month < 10){
                month = "0"+month;
            }
            if(date < 10){
                date = "0"+date;
            }

            let s  = year+"-"+month+"-"+date+' '+ start_time;
            let mydate= new Date(s);
            mydate.setMinutes(mydate.getMinutes()+ time_long); //当前时间加分钟
            let arr_date = (mydate+"").split(":");

            let str = arr_date[0].substring(arr_date[0].length-2,arr_date[0].length)+ ":" + arr_date[1];
            console.log("str:"+str);
            $("#end_time").val(str);
            form.render();
        });

        $(".si").hide();
        $(".sc").hide();
        form.on('select(time_slot)', function (data) {
            let time_slot_id = data.value;
            $.post('{:url("Schooltime/getById")}', {
                'time_slot_id': time_slot_id
            }, function (response) {
                let data = response.data;
                $(".si").show();
                $(".sc").show();
                $(".ss").hide();
                $(".sk").hide();
                console.log(data);
                $('#end_time').val(data.end_time);
                $('#time_long').val(data.time_long);
                $('#start_time').val(data.start_time);
                form.render();
            });
        });

        let intputs = document.getElementsByName("xq");
        form.on('checkbox(check)', function (data){
            // console.log(data);
            for(var i = 0; i < intputs.length; i ++){
                console.log(1);
                if(intputs[i].value == data.value){
                    console.log(2);
                    if(data.value == intputs[i].value){
                        console.log(3);
                        //工作日
                        if(data.value == 8){
                            if(data.elem.checked == true){

                                for(var j = 0; j < intputs.length; j ++){
                                    console.log(4);
                                    if(intputs[j].value != 9 && intputs[j].value != 6  && intputs[j].value != 7){
                                        intputs[j].checked = true;
                                    }

                                }
                            }else{

                                for(var j = 0; j < intputs.length; j ++){
                                    console.log(4);
                                    if(intputs[j].value != 9 && intputs[j].value != 6  && intputs[j].value != 7){
                                        intputs[j].checked = false;
                                    }

                                }
                            }


                        }
                        //周末
                        if(data.value == 9){

                            if(data.elem.checked == true){

                                for(var j = 0; j < intputs.length; j ++){
                                    console.log(4);
                                    if(intputs[j].value == 9 || intputs[j].value == 6  || intputs[j].value == 7){
                                        intputs[j].checked = true;
                                    }

                                }

                            }else{

                                for(var j = 0; j < intputs.length; j ++){
                                    console.log(4);
                                    if(intputs[j].value == 9 || intputs[j].value == 6  || intputs[j].value == 7){
                                        intputs[j].checked = false;
                                    }

                                }
                            }

                        }
                    }
                }
            }



            let value_ = "";
            //取值
            for(var k = 0; k < intputs.length; k ++){
                if(intputs[k].checked == true && intputs[k].value != 8 && intputs[k].value != 9){
                    console.log(intputs[k].title)
                    value_ = value_ +  intputs[k].title + ',';
                }

            }

            value_ = value_.substring(0,value_.length-1)
            console.log(value_)
            $("#xq").val(value_);

           form.render()
        })

        // form.on('checkbox', function (data) {
        //     console.log(data);
        //     console.log(data.elem.checked);//
        //     let check = data.value;
        //     // if (data.elem.checked == true) {
        //         if(check == 1){
        //
        //             xq_1.elem.checked = true;
        //             xq_2.elem.checked = true;
        //             xq_3.elem.checked = true;
        //             if(data.elem.checked == true) {
        //
        //
        //                // $(".xq_1").attr("checked", "checked");
        //                 // $(".xq_2").attr("checked", "checked");
        //                 // $(".xq_3").attr("checked", "checked");
        //                 // $(".xq_4").attr("checked", "checked");
        //                 // $(".xq_5").attr("checked", "checked");
        //             }else{
        //
        //                 $(".xq_1").attr("checked",false);
        //                 // $(".xq_2").attr("checked",false);
        //                 // $(".xq_3").attr("checked",false);
        //                 // $(".xq_4").attr("checked",false);
        //                 // $(".xq_5").attr("checked",false);
        //
        //             }
        //         }else{
        //             $(".xq_6").attr("checked","checked");
        //             $(".xq_7").attr("checked","checked");
        //         }
        //     // } else {
        //     //     if(check == 1){
        //     //         $(".xq_1").attr("checked",false);
        //     //         $(".xq_2").attr("checked",false);
        //     //         $(".xq_3").attr("checked",false);
        //     //         $(".xq_4").attr("checked",false);
        //     //         $(".xq_5").attr("checked",false);
        //     //     }else{
        //     //         $(".xq_6").attr("checked",false);
        //     //         $(".xq_7").attr("checked",false);
        //     //     }
        //     // }
        //     form.render()
        // })

        /*
        form.on('checkbox(xq)', function (data) {
            console.log(data.value);
            console.log(data.elem.checked);//
            form.render()
        })
        */

        //监听提交
        form.on('submit(form)', function (data) {
            newData = data.field;
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    });
</script>
